<!-- 菜单页代码  contextButton/index.vue -->
<template>
  <div id="contextmenu" class="contextmenu">
    <div class="contextmenu__item" @click="handleClose()">
      关闭当前&nbsp;&nbsp;&nbsp;&#10005;
    </div>
    <div class="contextmenu__item" @click="handleCloseAll()">
      全部关闭&nbsp;&nbsp;&nbsp;&#10005;
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  name: 'ContextMenu',
  setup(props, context) {
    const targetName = ref('/welcome');

    const init = (event) => {
      targetName.value = event.target.id.split('-')[1];
      // 设置菜单出现的位置
      // 具体显示位置根据自己需求进行调节
      let menu = document.querySelector('#contextmenu');
      let cha = document.body.clientHeight - event.clientY;
      // console.log(document.body.clientHeight, event.clientY, cha);
      // 防止菜单太靠底，根据可视高度调整菜单出现位置
      if (cha < 150) {
        menu.style.top = event.clientY - 120 + 'px';
      } else {
        menu.style.top = event.clientY + 18 + 'px';
      }
      menu.style.left = event.clientX + 10 + 'px';
      document.addEventListener('click', foo); // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
    };
    const foo = () => {
      context.emit('foo');
    };
    const handleClose = () => {
      context.emit('handleClose', targetName.value);
    };
    const handleCloseAll = () => {
      context.emit('handleCloseAll');
    };
    return { init, handleClose, handleCloseAll };
  },
};
</script>

<style scoped>
.contextmenu__item {
  display: block;
  line-height: 34px;
  text-align: center;
}
.contextmenu__item:not(:last-child) {
  border-bottom: 1px solid rgba(64, 158, 255, 0.2);
}
.contextmenu {
  position: absolute;
  background-color: #ecf5ff;
  width: 100px;
  /*height: 106px;*/
  font-size: 12px;
  color: #409eff;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid rgba(64, 158, 255, 0.2);
  white-space: nowrap;
  z-index: 1000;
}
.contextmenu__item:hover {
  cursor: pointer;
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}
</style>
